<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    modal-append-to-body
    lock-scroll
    class="small-common-dialog-size"
  >
    <div class="approve-content">
      <div class="approve-tip">
        <img :src="AttentionIcon" alt="提示">
        <div>{{ approveTip }}</div>
      </div>
      <el-form ref="supplierApproveForm" :model="reasonData" :rules="formRules">
        <el-form-item label-width="0" prop="reason">
          <el-input v-model.trim="reasonData.reason" :rows="2" type="textarea" size="small" maxlength="1000" placeholder="请输入审批理由" />
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-footer">
      <el-button class="confirm-btn" type="primary" @click="formValidate">确定</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import AttentionIcon from '@/assets/supplier/attention.png';
export default {
  name: 'ApproveDialog',
  components: {
  },
  props: {
    isAgree: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      AttentionIcon,
      dialogVisible: false,
      reasonData: {
        reason: ''
      }
    };
  },
  computed: {
    formRules() {
      return {
        reason: [{ required: true, trigger: 'blur', message: '请输入审批理由' }]
      };
    },
    submitBtnDisabled() {
      return !this.reasonData.reason;
    },
    approveTip() {
      return this.isAgree ? '请确认是否通过审批，通过后将更新最新供应商信息和账号信息' : '请确认是否拒绝审批，拒绝后将通知发起人进行修改';
    }
  },
  methods: {
    handleDialogClose() {
      this.dialogVisible = false;
      this.$refs['supplierApproveForm'].resetFields();
    },
    formValidate() {
      this.$refs['supplierApproveForm'].validate(valid => {
        if (valid) {
          this.$emit('approveConfirm', this.reasonData.reason);
          this.handleDialogClose();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.approve-content {
  margin-bottom: 24px;
  .approve-tip {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
    > img {
      margin-right: 8px;
      width: 24px;
      height: 24px;
      display: block;
      float: left;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .confirm-btn {
    font-size: 16px;
    padding: 8px 26px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 26px;
    margin-left: 16px !important;
  }
}
</style>
